<template>
  <s-layout title="VIP会员中心" class="set-userinfo-wrap">

      <view class="ss-flex  ss-p-l-20  ss-p-b-20 ss-p-t-20 bg-black">
        <view class="header-box-content" style="float: left;">
          <su-image
            class="content-img"
            isPreview
            :current="0"
            :src="sheep.$url.cdn(state.model.avatar)"
            :height="80"
            :width="80"
            :radius="40"
            mode="scaleToFill"
          ></su-image>
		
        </view>
		<span style="color: #ffffff;float: right;    margin-left: 20px;">{{state.model.nickname}}</span>
      </view>

      <view class=" ss-p-x-30 ss-p-b-20  jhs-viptitle">
		  VIP特权介绍
       </view>
	   <view>
		   			<uni-card  padding="0" spacing="0" margin="10">
						<view class="cardup">
							<view class="cardup_up">VIP优先答疑</view>
							<view class="cardup_down">全科目优先答疑权限</view>
						</view>
		   				<view class="uni-body" style="padding:10px 30px 0px 30px;">详细介绍</view>
<view class="uni-body" style="padding:5px 30px 10px 30px;">个人中心【我的答疑】，您的专业问题会被置顶，优先由名师快速回复，【人工客服及热线】针对考试热点问题则由客服1V1解答</view>

		   			</uni-card>
	   </view>
	   <view>
	   		   			<uni-card  padding="0" spacing="0" margin="10">
	   						<view class="cardup">
	   							<view class="cardup_up">独享定制好课</view>
	   							<view class="cardup_down">购买VIP课程专为本班学员专属定制</view>
	   						</view>
	   		   				<view class="uni-body" style="padding:10px 30px 0px 30px;">详细介绍</view>
	   <view class="uni-body" style="padding:5px 30px 10px 30px;">
		   点击本页面下方2023年一级造价工程师【VIP私教通关班】课程，以及2023年一级消防工程师【零基础通关班】课程进行购买，即可享有专属定制课程
	   </view>
	   
	   		   			</uni-card>
	   	   </view>
		   <view>
		   		   			<uni-card  padding="0" spacing="0" margin="10">
		   						<view class="cardup">
		   							<view class="cardup_up">专业书籍8折起</view>
		   							<view class="cardup_down">会员享受好书超低价</view>
		   						</view>
		   		   				<view class="uni-body" style="padding:10px 30px 0px 30px;">详细介绍</view>
		   <view class="uni-body" style="padding:5px 30px 10px 30px;">vip会员针对不同书籍，享有不同力度的折扣，新教材及专业配套教辅书籍低至8.5折，书籍扫码还可免费兑换课程、题库等</view>
		   
		   		   			</uni-card>
		   	   </view>
			   <view>
			   		   			<uni-card  padding="0" spacing="0" margin="10">
			   						<view class="cardup">
			   							<view class="cardup_up">配套教辅资料</view>
			   							<view class="cardup_down">享有全套课程资料</view>
			   						</view>
			   		   				<view class="uni-body" style="padding:10px 30px 0px 30px;">详细介绍</view>
			   <view class="uni-body" style="padding:5px 30px 10px 30px;">精编优质学习资料辅助高效学习，思维导图/高频考点/知识点清单等聚焦学科重点难点，内容紧扣考纲，巩固强化</view>
			   
			   		   			</uni-card>
			   	   </view>
				   <view>
				   		   			<uni-card  padding="0" spacing="0" margin="10">
				   						<view class="cardup">
				   							<view class="cardup_up">独享权益</view>
				   							<view class="cardup_down">购买套餐可开通会员</view>
				   						</view>
				   		   				<view class="uni-body" style="padding:10px 30px 0px 30px;">详细介绍</view>
				   <view class="uni-body" style="padding:5px 30px 10px 30px;">购买套餐后即可享受课程+VIP双重服务</view>
<view class="uni-body" style="padding:5px 30px 10px 30px;">为保证会员服务质量，计划社VIP会员暂不对外出售，购买下方任意套餐获赠VIP会员，时效等同套餐</view>
				   
				   		   			</uni-card>
				   	   </view>
  </s-layout>
</template>

<script setup>
  import { computed, ref, reactive, onBeforeMount, unref } from 'vue';
  import { mobile, password, username } from '@/sheep/validate/form';
  import sheep from '@/sheep';
  import { clone } from 'lodash';
  import { showAuthModal } from '@/sheep/hooks/useModal';

  const state = reactive({
    model: {},
    rules: {},
    thirdOauthInfo: null,
  });

  const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';

  const genderRadioMap = [
    {
      name: '男',
      value: '1',
    },
    {
      name: '女',
      value: '0',
    },
    {
      name: '保密',
      value: '2',
    },
  ];

  const userInfo = computed(() => sheep.$store('user').userInfo);

  // 选择性别
  function onChangeGender(e) {
    state.model.gender = e.detail.value;
  }
  // 修改用户名
  const onChangeUsername = () => {
    !state.model.verification?.username && showAuthModal('changeUsername');
  };

  // 修改手机号
  const onChangeMobile = () => {
    showAuthModal('changeMobile');
  };

  function onChooseAvatar(e) {
    const tempUrl = e.detail.avatarUrl || '';
    uploadAvatar(tempUrl);
  }

  //修改头像
  function onChangeAvatar() {
    uni.chooseImage({
      success: async (chooseImageRes) => {
        const tempUrl = chooseImageRes.tempFilePaths[0];
        uploadAvatar(tempUrl);
      },
    });
  }

  async function uploadAvatar(tempUrl) {
    if (!tempUrl) return;
    let { url } = await sheep.$api.app.upload(tempUrl, 'ugc');
    state.model.avatar = url;
  }

  // 修改/设置密码
  function onSetPassword() {
    if (state.model.verification.password) {
      showAuthModal('changePassword');
    } else {
      showAuthModal('resetPassword');
    }
  }

  // 绑定第三方账号
  async function bindThirdOauth() {
    let result = await sheep.$platform.useProvider('wechat').bind();
    if (result) {
      getUserInfo();
    }
  }

  // 解绑第三方账号
  function unBindThirdOauth() {
    uni.showModal({
      title: '解绑提醒',
      content: '解绑后您将无法通过微信登录此账号',
      cancelText: '再想想',
      confirmText: '确定',
      success: async function (res) {
        if (res.confirm) {
          const result = await sheep.$platform.useProvider('wechat').unbind();
          if (result) {
            getUserInfo();
          }
        }
      },
    });
  }

  // 保存信息
  async function onSubmit() {
    const { code, data } = await sheep.$api.user.update({
      avatar: state.model.avatar,
      nickname: state.model.nickname,
      gender: state.model.gender,
    });
    if (code === 1) {
      getUserInfo();
    }
  }

  const getUserInfo = async () => {
    const userInfo = await sheep.$store('user').getInfo();
    state.model = clone(userInfo);

    if (sheep.$platform.name !== 'H5') {
      let { data, code } = await sheep.$api.user.thirdOauthInfo();
      if (code === 1) {
        state.thirdOauthInfo = data;
      }
    }
  };

  onBeforeMount(async () => {
    getUserInfo();
  });
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-file-picker {
      border-radius: 50%;
    }

    .uni-file-picker__container {
      margin: -14rpx -12rpx;
    }

    .file-picker__progress {
      height: 0 !important;
    }

    .uni-list-item__content-title {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-disabled {
      color: #333333;
    }
  }

  :deep(.disabled) {
    opacity: 1;
  }

  .gender-name {
    font-size: 28rpx;
    font-weight: 500;
    line-height: normal;
    color: #333333;
  }

  .title-box {
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
    line-height: 100rpx;
  }

  .logout-btn {
    width: 710rpx;
    height: 80rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: $white;
  }

  .radio-dark {
    filter: grayscale(100%);
    filter: gray;
    opacity: 0.4;
  }

  .content-img {
    border-radius: 50%;
  }
  .header-box-content {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    overflow: hidden;
    border-radius: 50%;
  }
  .avatar-action {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 1;
    width: 160rpx;
    height: 46rpx;
    background: rgba(#000000, 0.3);

    .avatar-action-btn {
      width: 160rpx;
      height: 46rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
    }
  }

  // 绑定项
  .account-list {
    background-color: $white;
    height: 100rpx;
    padding: 0 20rpx;

    .list-img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    .list-name {
      font-size: 28rpx;
      color: #333333;
    }

    .info {
      .avatar {
        width: 38rpx;
        height: 38rpx;
        border-radius: 50%;
        overflow: hidden;
      }

      .name {
        font-size: 28rpx;
        font-weight: 400;
        color: $dark-9;
      }
    }

    .bind-box {
      width: 100rpx;
      height: 50rpx;
      line-height: normal;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;

      .bind-btn {
        width: 100%;
        height: 100%;
        border-radius: 25rpx;
        background: #f4f4f4;
        color: #999999;
      }
      .relieve-btn {
        width: 100%;
        height: 100%;
        border-radius: 25rpx;
        background: var(--ui-BG-Main-opacity-1);
        color: var(--ui-BG-Main);
      }
    }
  }

  .list-border {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    border-bottom: 2rpx solid #eeeeee;
  }

  image {
    width: 100%;
    height: 100%;
  }
  
  .jhs-viptitle {
      width: calc(100% - 30px);
      margin: 15px auto;
      font-size: 20px;
      color: #373530;
      font-weight: bold;
      line-height: 28px;
  }
  .cardup{
	  background-image: url(/static/images/shouye_phone/wxyhbg.png);
	      width: 100%;
	      height: 100px;
	      background-size: cover;
		  padding-left: 30px;
		  .cardup_up{
			      font-size: 20px;
			      color: rgb(55, 53, 48);
			      font-weight: bold;
			      height: 44px;
			      line-height: 70px;
		  }
		  .cardup_down{
			      font-size: 13px;
			      font-weight: normal;
			      margin-top: 6px;
		  }
  }
  .uni-card .uni-card__content{
	  padding: 0px !important;
  }
</style>
